<template>
  <RecycleScroller :items="users" :item-size="72" key-field="id" v-slot="{ item: user }">
    <UserItem :user="user" />
  </RecycleScroller>
</template>

<script setup>
import { useChatStore } from '@/stores/chat';
import { ref, computed } from 'vue';
import { RecycleScroller } from 'vue-virtual-scroller'
import UserItem from './UserItem.vue';

const store = useChatStore();
const visibleIds = ref(new Set());

// 动态计算可见项等待时间
const waitTimes = computed(() => {
  const map = new Map();
  visibleIds.value.forEach(id => {
    const user = store.findUser(id);
    map.set(id, calculateWaitTime(user));
  });
  return map;
});

const props = defineProps({
  users: {
    type: Array,
    required: true
  }
});


function handleVisibilityChange(users) {
  visibleIds.value = new Set(users.map(u => u.id));
}
</script>